<template>
  <van-popup
    :show="showToast"
    round
    position="bottom"
    :style="popupStyle"
    @click-overlay="closePopup"
  >
    <div class="task-header">
      <van-icon class="close-btn" @click="closePopup" name="close" />
      <div class="header-title">天天做任务赚翻租币</div>

      <div class="header-des">
        已获得
        <span class="header-dex-gold">3321</span>
        个租币，租币可兑换商品
      </div>
    </div>
    <div class="task-List">
      <div class="second-title">新人专享</div>
      <div class="task-card" v-for="(item, index) of taskList2" :key="index">
        <div class="task-icon">
          <van-icon name="hot-o" size="35" color="#609F7F" />
        </div>
        <div class="task-info">
          {{ item.text }}
        </div>
        <div
          :class="item.status ? 'task-status' : 'action-task'"
          @click="onClickTask(item)"
        >
          {{ item.status ? `+${item.goldNum}租币` : '已领取' }}
        </div>
      </div>
      <div class="second-title">每天逛逛</div>
      <div class="task-card" v-for="(item, index) of taskList1" :key="index">
        <div class="task-icon">
          <van-icon name="hot-o" size="35" color="#609F7F" />
        </div>
        <div class="task-info">
          {{ item.text }}
        </div>
        <div
          :class="item.status ? 'task-status' : 'action-task'"
          @click="onClickTask(item)"
        >
          {{ item.status ? `+${item.goldNum}租币` : '已领取' }}
        </div>
      </div>
    </div>
    <div class="notifly" :class="animation ? 'animasionNotifySET' : ''">
      <div class="notifly-gold">
        <img src="@/assets/glod2.png" alt="" />
      </div>
      <div class="notifly-content">
        <span class="notifly-title">恭喜获得{{ randererGoldNum }}个租币！</span>
        <span class="notifly-result">任务完成</span>
      </div>
      <div class="notifly-glod-num">
        {{ `+${randererGoldNum}` }}
      </div>
    </div>
  </van-popup>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { TaskItemType } from '@/views/home-page/init-data-types'
import { taskList1, taskList2 } from '@/views/home-page/init-data'

interface PropsType {
  showToast: boolean
}

defineProps<PropsType>()

const emit = defineEmits(['closePopup'])
const popupStyle = { height: '90%' }
const randererGoldNum = ref(0)
const animation = ref(false)

function onClickTask(item: TaskItemType) {
  if (item.status) {
    randererGoldNum.value = item.goldNum
    animation.value = true
    item.status = 0
    setTimeout(() => {
      animation.value = false
    }, 3000)
  }
}

function closePopup() {
  emit('closePopup', '')
}
</script>

<style lang="scss" scoped>
.notifly-glod-num {
  line-height: 26.5px;
  font-size: 19px;
  color: #fff;
  position: absolute;
  right: 26.5px;
}
.notifly-result {
  line-height: 16.5px;
  font-size: 12px;
  color: #fff;
  opacity: 0.77;
}
.notifly-title {
  line-height: 21px;
  font-size: 15px;
  color: #fff;
}
.notifly-content {
  display: flex;
  flex-direction: column;
}
.notifly-gold {
  width: 41px;
  height: 41px;
  overflow: hidden;
  margin-left: 13px;
}
.task-List {
  background-color: #e9faf4;
  padding-bottom: 30px;
}
.task-header {
  position: relative;
  height: 79px;
  background: linear-gradient(90deg, #7ad38c, #40cbbe);
  .header-title {
    font-size: 21px;
    color: #fff;
    text-align: center;
    line-height: 29.5px;
    padding-top: 16px;
    font-weight: bold;
  }
  .header-des {
    line-height: 20px;
    font-size: 14px;
    color: #fff;
    text-align: center;
    .header-dex-gold {
      font-size: 16px;
      color: #fff48d;
    }
  }
}
.close-btn {
  position: absolute;
  top: 14px;
  right: 14.5px;
  color: #fff;
  font-size: 27px;
}

.second-title {
  display: inline-block;
  margin-top: 11px;
  margin-left: 23px;
  line-height: 24px;
  font-size: 17px;
  color: #133c37;
}

.task-card {
  margin: 10px 12px 0 12px;
  background: #fff;
  border-radius: 6px;
  width: 350px;
  height: 79px;
  display: flex;
  align-items: center;
  justify-content: left;
  position: relative;

  .task-icon {
    width: 49px;
    height: 49px;
    border-radius: 50px;
    background: rgba($color: #72d0a0, $alpha: 17.85%);
    margin-left: 17.5px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .task-info {
    margin-left: 9.5px;
    font-size: 15px;
    line-height: 21px;
    color: #333;
  }

  .task-status {
    position: absolute;
    top: 25.5px;
    right: 9.5px;
    color: #ff7f00;
    border: 0.5px solid #ff7f00;
    border-radius: 15px;
    width: 76.5px;
    line-height: 28px;
    height: 28px;
    text-align: center;
    font-size: 14px;
  }

  .action-task {
    position: absolute;
    top: 25.5px;
    right: 9.5px;
    color: #999999;
    border: 0.5px solid #999999;
    border-radius: 15px;
    width: 76.5px;
    line-height: 28px;
    height: 28px;
    text-align: center;
    font-size: 14px;
  }
}

@keyframes notiflySend {
  0% {
    transform: translateY(200%);
    opacity: 0;
  }

  40% {
    transform: translateY(1%);
    opacity: 1;
  }
  60% {
    transform: translateY(1%);
    opacity: 1;
  }

  100% {
    transform: translateY(200%);
    opacity: 0;
  }
}
.notifly {
  position: fixed;
  right: 10px;
  left: 10px;
  bottom: 7.5px;
  height: 55px;
  background: rgba($color: #000000, $alpha: 72%);
  border-radius: 6px;
  display: flex;
  justify-content: start;
  align-items: center;
  transform: translateY(200%);
}
.animasionNotifySET {
  transform: translateY(200%);
  animation-name: notiflySend;
  /*关键帧名称*/
  animation-timing-function: ease-in-out;
  /*动画的速度曲线*/
  animation-iteration-count: 1;
  /*动画播放的次数*/
  animation-duration: 3s;
  /*动画所花费的时间*/
}
</style>
